import Sact from "sact";
import iconButton from "./icon-button.js";
import modal from "./modal.js"
let template = `
<div class="file-xx-card chatWarpper" :style="{display:props.show?'':'none'}">
    <modal :show="show.modal" title="创建一个新会话" @ok="createConversation" @cancel="closeModal">
        <textarea class="mdui-textfield-input" :value="newConverText"  @input="newConverText = $event.target.value" placeholder="用户id"></textarea>
    </modal>
    <div class="chatHeader">
        <div class="chatMoreBox" s-if="show.more">
            <div @click="show.modal = true;show.more= false;" class="chatMoreBoxLi">发起新聊天</div>
            <div @click="feedback();show.more= false;" class="chatMoreBoxLi">反馈问题</div>
            <div class="chatMoreBoxLi">退出登录</div>
        </div>
        <icon-button @click="openSetting" icon="add_circle_outline"></icon-button>
        <span class="chatTargetName cut-text">
            聊天列表
        </span>
        <icon-button @click="showMessage('暂时不支持搜索呢，可以向你想要聊天的用户发起聊天')" icon="search"></icon-button>
    </div>
    <div s-if="chatlist.length!==0" class="chatTargetList mdui-list">
        <div s-for="cc in chatlist" :key="cc.id" class="chatLi mdui-list-item mdui-ripple" @click="changechat(cc)">
            <img class="chatAvatar chatBigImg" :src="userInfor[cc.members[1] || cc.members[0]].avatar_img_url"/>
            <div class="chatTargetContent">
                <div class="chatTargetContentLeft">
                    <div class="chatTargetContentLeftName cut-text">
                        {{ cc.name }}
                        <div s-if="cc.waitNum" class="weui-badge">
                            {{cc.waitNum.toString()}}
                        </div>
                    </div>
                    <div class="chatTargetContentLeftMessage cut-text">
                        {{cc.lastMessage}}
                    </div>
                </div>
                <div class="chatTargetContentRight">
                    {{cc.lastTime}}
                </div>
            </div>
        </div>
    </div>
    <div s-if="chatlist.length===0">
    <div class="chatNoneText">
    这里空空如也
    <span @click="show.modal = true;" style="margin-left:4px;color:#06ae56;" class="chatFoucs">发起对话</span>
    </div>
    </div>
</div>
`
export default Sact.component({
    template,
    name:"main",
    component: {
        "icon-button": iconButton,
        modal,
    },
    props: ["show",'chatlist','addchat','changechat'],
    data() {
        return {
            chatlist: [],
            show:{
                more:false,
                modal:false,
            },
            newConverText:"",
            img:"/static/img/avatar.jpg",
        }
    },
    method: {
        closeModal(){
            this.data.show.modal = false;
        },
        changechat(chat) {
            if (this.props.changechat) {
                chat.waitNum = 0;
                this.props.changechat(chat.id,chat.name);
            }
        },
        //打开设置
        openSetting(){
            this.data.show.more = !this.data.show.more;
        },
        feedback(){
            if(client.uid === "1"){
                showMessage("系统管理员不需要反馈啦");
                return;
            }
            this.props.addchat("1",(e)=>{
                this.data.show.modal = false;
                showMessage("已经自动帮你和1号管理员创建了对话",()=>{
                    this.changechat(e.id);
                })
            })
        },
        createConversation(){
            if(!this.data.newConverText){
                return;
            }
            if(client.uid === this.data.newConverText){
                showMessage("不要自己和自己聊天啦");
                return;
            }
            this.props.addchat(this.data.newConverText,(e)=>{
                this.data.show.modal = false;
            })
        },
    },
    beforeUpdate() {
        this.data.chatlist = this.props.chatlist;
    },
})
